import { memo, useEffect } from 'react';
// import mojs from 'mo-js';
import './index.less';

const Shape = memo(() => {

    const boxVariants = {
        // 初始状态
        initial: {
            y: 0,
            x: 0,
            opacity: 1,
        },
        // 动画过程中的浮动状态
        animate: {
            x: [-10, 10],
            y: [-10, 10], // 在垂直方向上下浮动，范围是 -10px 到 10px
            opacity: [0.8, 1], // 透明度在 0.8 到 1 之间变化
            transition: {
                // yoyo: Infinity, // 来回循环动画
                duration: 2, // 单次动画持续时间为 2 秒
                // ease: 'easeInOutSine', // 使用缓动函数，让动画更平滑自然
            },
        },
    };

    return (
        <div className='background-container'>
            <div 
                className='rangle-top'
                variants={boxVariants}
                initial="initial"
                animate="animate"
            ></div>
            <div 
                className='rangle-left-one'
                variants={boxVariants}
                initial="initial"
                animate="animate"
            ></div>
            <div 
                className='rangle-left-two'
                variants={boxVariants}
                initial="initial"
                animate="animate"
            ></div>
        </div>
    )
})

export default Shape;